Vue 动态组件

2022-04-21
javascript vue2.0

初始化

在通常情况下，不同组件之间的动态切换可以让页面变得更加的拥有趣味，且可以减少一些不必要的从页面占用。动态组建可以用于构建一些非动态的填写，而如果需要满足一些OAuth等切换或登录的场景，则需要使用 Vue 动态组件中的异步组件。

<div id="example">
  <button @click="methodsAll">Go</button>
  <component v-bind:is="componentView"></component>
</div>
<script>
var one = {
    template: `
        <div>one Template</div>
        `
    };
var two = {
    template: `
        <div>two Template</div>
        `
    };
var three = {
        template: `
        <div>three Template</div>
        `
    };
new Vue({
    el: '#example',
    components: {
        one,
        two,
        three,
    },
    data:{
        index:0,
        list:['one','two','three'],
    },
    computed:{
        componentView(){
            return this.list[this.index];
        }
    },
    methods:{
        methodsAll(){
            this.index = (++this.index)%3;
        }
    }
})
</script>

keep-alive

Vue创建一个新的 ```componentView``` 实例，也就是说只要通过使用```keep-alive```方法进行包裹，即可让他们在```第一次```创建时会被进行**缓存**，即保存刚刚切换后的数据，为了更加的体现```keep-alive```效果，我们可以使用表单来进行验证：


| ID | DA |
| --- | --- |
| 使用 keep-alive | ![](https://49812933408852955071488026628034-1301075051.cos.ap-nanjing.myqcloud.com/1615860798_20210316101115343_930785737.gif) |
| 不使用 keep-alive | ![](https://49812933408852955071488026628034-1301075051.cos.ap-nanjing.myqcloud.com/1615860799_20210316101142717_305448193.gif) |
```vue
<div id="example">
  <button @click="methodsAll">Go</button>
  <keep-alive>
    <component v-bind:is="componentView"></component>
  </keep-alive>
</div>
<script>
var one = {
    template: `
        <input type="text">
        `
    };
var two = {
    template: `
        <div>two Template</div>
        `
    };
var three = {
    template: `
        <div>three Template</div>
        `
    };
new Vue({
    el: '#example',
    components: {
        one,
        two,
        three,
    },
    data:{
        index:0,
        list:['one','two','three'],
    },
    computed:{
        componentView(){
            return this.list[this.index];
        }
    },
    methods:{
        methodsAll(){
            this.index = (++this.index)%3;
        }
    }
})
</script>

⬅️ Go back